<style>
    .layui-table-cell {
        height: auto;
    }

    .layui-table img {
        max-width: 200px;
    }
</style>

<div class="layui-upload">
    <button class="layui-btn layui-btn-normal" id="testList" type="button">选择支付宝有金额的二维码</button>
    <button class="layui-btn" id="saveqr" type="button">保存二维码</button>

    <table class="layui-hide" id="test" lay-filter="wxqrlist"></table>
</div>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

    layui.use(['upload', 'table', 'element'], function () {
        var $ = layui.jquery
            , upload = layui.upload,
            table = layui.table,
            element = layui.element;
        var imgs = [], mytable;
        mytable = layui.table.render({
            elem: '#test'
            , data: imgs
            , cols: [[
                {field: 'index', width: 80, title: 'ID'},
                {
                    field: '', width: 120, title: '二维码', event: 'prev', templet: function (data) {
                        return "<img  style='width: 100px;height: 100px' src='" + data.b64 + "'/>"
                    }
                }
                , {field: 'url',  title: '内容'}
                , {field: 'money', width: 100, title: '金额', edit: "text"}
                , {title: '操作', width: 80, align: 'center', toolbar: '#barDemo',float:"right"}

            ]],
            page: true
        });
        //监听工具条
        table.on('tool(wxqrlist)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                obj.del();
                imgs = layui.table.cache.test;
                mytable.reload({
                    data: imgs
                });
            }else if(obj.event === 'prev'){
                layer.open({
                    title: false,
                    type: 1,
                    content: "<img  style='max-width: 270px;height: auto' src='" + data.b64 + "'/>"
                });
            }
        });

        var total = 0;
        upload.render({
            elem: '#testList',
            acceptMime: 'image/*'
            , accept: 'file'
            , multiple: true
            , auto: false
            , choose: function (obj) {

                var len = Object.keys(obj.pushFile()).length;
                imgs = [];
                var index = layer.open({
                    type: 1,
                    title: false,
                    skin: 'layui-layer-molv',
                    icon: 0,
                    closeBtn: 0,
                    shade: [0.8, '#393D49'],
                    offset: 'auto',
                    content: ' <div class="layui-layer-dialog layui-layer-border layui-layer-msg"  >\n' +
                        '        <div id="" class="layui-layer-content">\n' +
                        '            <i >正在处理图片中....处理完成后请填写金额</i>\n' +
                        '            <div class="layui-progress" lay-showpercent="true" lay-filter="load">\n' +
                        '                <div class="layui-progress-bar" lay-percent="0"></div>\n' +
                        '               </div>\n' +
                        '        </div>\n' +
                        '        <span class="layui-layer-setwin"></span></div>'
                });

                obj.preview(function (index, file, result) {

                    img=result.split(",")[1];
                    img=window.atob(img);
                    var ia = new Uint8Array(img.length);
                    for (var i = 0; i < img.length; i++) {
                        ia[i] = img.charCodeAt(i);
                    }
                    var blob=new Blob([ia],
                        {type:"image/png"});
                    var formdata=new FormData();
                    formdata.append('file',blob);

                    $.ajax({
                        url: "<{url c='admin/api' a='qr'}>",
                        data :  formdata,
                        processData : false,
                        contentType : false,
                        dataType: 'json',
                        method: 'POST',
                        async: true,
                        success: function (json) {
                            total++;
                            if (json.code === Api_Ok) {
                                imgs.push({"index": imgs.length+1, "money": "", "b64": result, "url": json.data});

                                element.progress('load', (Math.round((parseFloat(total)) / parseFloat(len) * 10000) / 100.00) + "%");
                                mytable.reload({
                                    data: imgs
                                });
                            }

                        }
                    });
                });
                var int=setInterval(function () {
                    if(total>=len){
                        layer.close(index);
                        clearInterval(int);
                    }

                }, 500);

            }

        });


        $('#saveqr').click(function () {
            var data = layui.table.cache.test;
            for (var i = 0; i < data.length; i++) {
                if (!checkRate(data[i].money)) {
                    layer.msg("序号为" + (i + 1) + "的二维码金额有误，请检查",{icon:5});
                    return;
                }
            }
            for (i = 0; i < data.length; i++) {
                $.post("<{url('admin/api','AddQr')}>", "type=" + PayAlipay + "&pay_url=" + encodeURIComponent(data[i].url) + "&price=" + data[i].money);
            }
            layer.msg( "保存成功",{icon:6});
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });



        function checkRate(input) {

            var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/

            return re.test(input);

        }
    });


</script>